<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0">
    <title>闪送超市</title>
    <link rel="stylesheet/less" href="./css/reset.less">
    <link rel="stylesheet/less" href="./css/common.less">
    <link rel="stylesheet/less" href="./css/supermarket.less">
</head>

<body>
    <!-- 顶部 -->
    <div class="head">
        <div class="logo"><img src="./images/logo.png" alt=""></div>
        <a class="search" href="./search.html">
            <img src="./images/search.png" alt="">
            <input type="search" name="search" placeholder="输入商家、分类或商圈">
        </a>
        <div class="scan"><img src="./images/sys.png" alt=""></div>
        <div class="message"><img src="./images/message.png" alt=""></div>
    </div>
    <!-- 导航 -->
    <div id="nav-box">
        <div class="item navactive">优选水果</div>
        <div class="item">面制食品</div>
        <div class="item">卤味熟食</div>
    </div>
    <!-- 产品内容 -->
    <div id="item-box">
        <div class="content active">
            <div class="title">优选水果</div>
            <div class="item">
                <div class="left"><img src="./images/yxsg.png" alt=""></div>
                <div class="right">
                    <div class="name"><span>精选</span>爱鲜蜂-佳沛绿奇异果</div>
                    <div class="mysy">买一赠一</div>
                    <div class="buy">
                        <div class="money-box">
                            <div class="monovalent">3粒/盒</div>
                            <div class="money">￥16.9</div>
                        </div>
                        <div class="add">+</div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="left"><img src="./images/yxsg.png" alt=""></div>
                <div class="right">
                    <div class="name"><span>精选</span>爱鲜蜂-佳沛绿奇异果</div>
                    <div class="mysy">买一赠一</div>
                    <div class="buy">
                        <div class="money-box">
                            <div class="monovalent">3粒/盒</div>
                            <div class="money">￥16.9</div>
                        </div>
                        <div class="add">+</div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="left"><img src="./images/yxsg.png" alt=""></div>
                <div class="right">
                    <div class="name"><span>精选</span>爱鲜蜂-佳沛绿奇异果</div>
                    <div class="mysy">买一赠一</div>
                    <div class="buy">
                        <div class="money-box">
                            <div class="monovalent">3粒/盒</div>
                            <div class="money">￥16.9</div>
                        </div>
                        <div class="add">+</div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="left"><img src="./images/yxsg.png" alt=""></div>
                <div class="right">
                    <div class="name"><span>精选</span>爱鲜蜂-佳沛绿奇异果</div>
                    <div class="mysy">买一赠一</div>
                    <div class="buy">
                        <div class="money-box">
                            <div class="monovalent">3粒/盒</div>
                            <div class="money">￥16.9</div>
                        </div>
                        <div class="add">+</div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="left"><img src="./images/yxsg.png" alt=""></div>
                <div class="right">
                    <div class="name"><span>精选</span>爱鲜蜂-佳沛绿奇异果</div>
                    <div class="mysy">买一赠一</div>
                    <div class="buy">
                        <div class="money-box">
                            <div class="monovalent">3粒/盒</div>
                            <div class="money">￥16.9</div>
                        </div>
                        <div class="add">+</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="title">速食方便面</div>
            <a href="./about.html" class="item">
                <div class="left"><img src="./images/heweidao.png" alt=""></div>
                <div class="right">
                    <div class="name"><span>精选</span>合味道XO酱海鲜风味面</div>
                    <div class="mysy">买四赠一</div>
                    <div class="buy">
                        <div class="money-box">
                            <div class="monovalent">3.5/桶</div>
                            <div class="money">￥3.5</div>
                        </div>
                        <div class="add">+</div>
                    </div>
                </div>
            </a>
            <a href="./about.html" class="item">
                <div class="left"><img src="./images/heweidao.png" alt=""></div>
                <div class="right">
                    <div class="name"><span>精选</span>合味道XO酱海鲜风味面</div>
                    <div class="mysy">买四赠一</div>
                    <div class="buy">
                        <div class="money-box">
                            <div class="monovalent">3.5/桶</div>
                            <div class="money">￥3.5</div>
                        </div>
                        <div class="add">+</div>
                    </div>
                </div>
            </a>
            <a href="./about.html" class="item">
                <div class="left"><img src="./images/heweidao.png" alt=""></div>
                <div class="right">
                    <div class="name"><span>精选</span>合味道XO酱海鲜风味面</div>
                    <div class="mysy">买四赠一</div>
                    <div class="buy">
                        <div class="money-box">
                            <div class="monovalent">3.5/桶</div>
                            <div class="money">￥3.5</div>
                        </div>
                        <div class="add">+</div>
                    </div>
                </div>
            </a>
            <a href="./about.html" class="item">
                <div class="left"><img src="./images/heweidao.png" alt=""></div>
                <div class="right">
                    <div class="name"><span>精选</span>合味道XO酱海鲜风味面</div>
                    <div class="mysy">买四赠一</div>
                    <div class="buy">
                        <div class="money-box">
                            <div class="monovalent">3.5/桶</div>
                            <div class="money">￥3.5</div>
                        </div>
                        <div class="add">+</div>
                    </div>
                </div>
            </a>
            <a href="./about.html" class="item">
                <div class="left"><img src="./images/heweidao.png" alt=""></div>
                <div class="right">
                    <div class="name"><span>精选</span>合味道XO酱海鲜风味面</div>
                    <div class="mysy">买四赠一</div>
                    <div class="buy">
                        <div class="money-box">
                            <div class="monovalent">3.5/桶</div>
                            <div class="money">￥3.5</div>
                        </div>
                        <div class="add">+</div>
                    </div>
                </div>
            </a>
        </div>
        <div class="content">
            <div class="title">优选水果</div>
            <div class="item">已售罄</div>
        </div>
    </div>
    <!-- 底部 -->
    <div class="bottom">
        <a href="./index.html"><img src="./images/index.png" alt="首页"><div>首页</div></a>
        <a class="shansong"  href="./supermarket.html"><img src="./images/shansongactive.png" alt="闪送超市"><div>闪送超市</div></a>
        <a href="./user.html"><img src="./images/wode.png" alt="我的"><div>我的</div></a>
        <a><img src="./images/gwc.png" alt="购物车"><div>购物车</div></a>
    </div>
</body>

</html>
<script src="./js/less.js"></script>
<script src="./js/common.js"></script>
<script src="./js/jquery-3.6.0.min.js"></script>
<script>
    $('#nav-box .item').click(function () {
        var index = $(this).index()
        $(this).addClass('navactive').siblings().removeClass('navactive')
        $('#item-box .content').eq(index).addClass('active').siblings().removeClass('active')
    })
</script>